<!-- 作者 : liandyao 公司: yidu -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鲜花维护</title>
    <link rel="stylesheet" href="/res/layui/css/layui.css">
    <script src="/res/layui/layui.js"></script>
    <script src="/res/js/tools.js"></script>
</head>
<body>
<form class="layui-form" action="" lay-filter="example" id="myform">
    <input type="hidden" name="flId">
    <div class="layui-form-item">
        <label class="layui-form-label">鲜花名字</label>
        <div class="layui-input-inline">
            <input type="text" name="flName" required lay-verify="required|flName" placeholder="请输入鲜花名字" autocomplete="off" class="layui-input">
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">鲜花价格</label>
        <div class="layui-input-inline">
            <input type="text" name="flPrice" required lay-verify="required|number" placeholder="请输入鲜花价格" autocomplete="off" class="layui-input">
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">鲜花数量</label>
        <div class="layui-input-inline">
            <input type="text" name="flQuantity" required lay-verify="required|number" placeholder="请输入鲜花数量" autocomplete="off" class="layui-input">
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上架日期</label>
        <div class="layui-input-inline">
            <input type="text" id="flDate" name="flDate" required lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">鲜花类型</label>
        <div class="layui-input-inline">
            <select name="typeId" id="typeId" lay-filter="">

            </select>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">鲜花图片</label>
        <div class="layui-input-inline">
           <input type="file" name="filePhoto">
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll()">关闭</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        var $ = layui.$;
        //日期
        laydate.render({
            elem: '#flDate'
        });

        //自定义验证规则
        form.verify({
            flName: function(value){
                if(value.length < 2){
                    return '名字至少得2个字符啊';
                }
            }

        });



        //监听提交
        form.on('submit(formDemo)', function(data){

            let formData = new FormData(document.getElementById("myform"));
            //formData.append("id","123");
            //没有文件上传时提交表单的代码
            let url = "/FlFlowerUploadServlet?action=addOrUpdate";
            //let data_= data.field;//需要提交的数据
            $.ajax({
                async:true, //true异步.  false 同步
                type:"POST", //请求方式
                url:url,    //请求的路径
                data:formData,  //请求的参数
                contentType: false, //发送信息至服务器时内容编码类型
                processData: false, //通过data选项传递进来的数据
                dataType:"json", //返回类型
                success:function(resp){ //成功回调函数
                    if(resp.state==1){
                        //在子页面里面调用父页面的方法
                        parent.closeLayer(resp.msg);
                    }else{
                        layer.msg(resp.msg);
                    }
                },error:function(){ //失败的回调函数

                }
            });


            return false;
        });



        //进入页面时,执行这段代码
        let url = "/FlTypeServlet?action=showTypeList";

        //jquery ajax 所有参数的写法
        $.ajax({
            async:false, //true异步.  false 同步
            type:"POST", //请求方式
            url:url,    //请求的路径
            data:null,  //请求的参数
            dataType:"json", //返回类型
            success:function(resp){ //成功回调函数
                $.each(resp,function(index,item){
                    $("#typeId").append("<option value='"+item.typeId+"'>"+item.typeName+"</option>")
                });
                //重新渲染
                form.render();
            },error:function(){ //失败的回调函数

            }
        });

        //给表单赋值
        setFormValue();

        function setFormValue(){
            let flId = getQueryString("id");
            if(flId){ //flId==""  flId==null  flId==undefined
                let url_ = "/FlFlowerUploadServlet?action=findById";
                let data_ = {id:flId};
                $.post(url_,data_,function (resp) {
                    console.info(resp);
                    if(resp.state==1){
                        //给表单赋值
                        form.val('example', resp.data);
                    }
                },"json")
            }

        }

        //表单赋值
        /*
        layui.$('#LAY-component-form-setval').on('click', function(){
            form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
            });
        });
        */


    });
</script>
</body>
</html>